<template>
    <!-- v-on 的指令
     v-on:事件名字="事件处理函数(实参)" 可以简写为 @click="handleClick"
     -->

     <h2>去购物</h2>
     <h3>购买的数量统计{{ count }}</h3>
     <button v-on:click="add">购买</button>
     <button @click="reduce">取消购买</button>
     <button @click="subCount(5)">一次购买5件</button>
     <!-- 阻止冒泡 
     .stop="事件处理函数" 
     .prevent="事件处理函数" 
     用于阻止事件冒泡和默认行为
     .onceo 用于只执行一次事件处理函数
 
     -->
      <hr></hr>
      <div>
        <a href="http://www.baidu.com" @click="one">阻止去百度</a>&nbsp;&nbsp;
        <a href="http://m.jd.com" @click="two(10,$event)">默认行为</a>
     </div>
     <div>
<p :[idname]="id">v-bind的绑定</p>
<button @click="idname = 'class'">calss选择器</button>
<!--
    .stop 阻止冒泡
    .prevent 阻止默认行为
    .once 只触发一次事件
    -->
    <div @click="onediv">
            <button @click.stop="btn">阻止冒泡</button> <br>
            <a href="http://www.baidu.com" @click.prevent="btn">阻止默认行为</a><br>
            <button @click.once="btn">触发一次行为</button>
        </div>
     </div>
</template>

<script>
    export default {
        data(){
            return{
                count:0 ,  
                id:'d1' ,
                idname:'id'

            }
        },
        methods:{
            add(){
                this.count++
            },
            reduce(){
                this.count--
            },
            subCount(num){
                this.count += num
            },
            one(event){
                event.preventDefault()
                alert("阻止了")
            },
            two(num,event){
                this.count+=num
                event.preventDefault()
                console.log('默认行为')
            },
            onediv(){
                console.log("我被触发了")
            },
            btn(){
                console.log('我是按钮。。')
            }
        }
    }
</script>
<style scoped>
#d1{
    color:red;
}
.d1{
    color:blue;
}

</style>